<template>
	<el-card>
		<div class="scheduleRecordDivClass" style="height: calc(100vh - 165px)">
			<el-form :inline="true" :model="state.queryForm">
				<el-form-item>
					<el-select v-model="state.queryForm.algoCode" placeholder="请选择算法" style="width: 120px">
						<el-option label="余弦相似度" value="1"></el-option>
						<el-option label="精准匹配" value="2"></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item>
					<el-select v-model="state.queryForm.ifInvalid" placeholder="请选择状态" style="width: 120px">
						<el-option label="开启" value="1">开启</el-option>
						<el-option label="关闭" value="2">关闭</el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item>
					<el-button :icon="Search" @click="searchBtn" type="primary">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Refresh" @click="resets">重置</el-button>
				</el-form-item>
				<!-- <el-form-item>
					<el-button :icon="Plus" type="primary" @click="addOrUpdateHandle">新增算法</el-button>
				</el-form-item>
				<el-form-item>
					<el-button :icon="Delete" type="danger">批量删除</el-button>
				</el-form-item> -->
			</el-form>
			<el-table
				v-loading="state.dataListLoading"
				:data="state.dataList"
				border
				max-height="calc(100vh - 280px )"
				style="width: 100%"
				@selection-change="selectionChangeHandle"
			>
				<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
				<el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
				<el-table-column prop="algoName" label="算法名称" header-align="center" align="center"></el-table-column>
				<el-table-column prop="algoDesc" label="算法说明" header-align="center" align="center"></el-table-column>
				<el-table-column prop="instructions" label="适用说明" header-align="center" align="center"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center"></el-table-column>
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
					<template #default="scope">
						<el-button type="primary" v-auth="'patient-primary:algorithm-mana:edit'" link @click="addOrUpdateHandle(scope.row)">编辑</el-button>
						<!-- <el-button type="danger" link @click="deleteHandle(scope.row.id, '')">忽略</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 -->
		<AddOrUpdate ref="addOrUpdateRef" @close="useCrud(state).getDataList()"></AddOrUpdate>
	</el-card>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks/indexZSY.ts'
import { onMounted, reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'

import { ElMessage, ElMessageBox } from 'element-plus/es'
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import { ElLoading } from 'element-plus'
import AddOrUpdate from './addOrUpdate.vue'

const dateTime = ref([])

const state: IHooksOptions = reactive({
	dataListUrl: '/empi/empialgo/page',
	deleteUrl: '/empi/empialgo/delete',
	queryForm: {
		algoCode: ''
		// ifInvalid: ''
	},
	dataListSelections: []
})

onMounted(() => {
	if (!state.queryForm.algoCode) {
		delete state.queryForm.algoCode
	}
	useCrud(state).getDataList()
})

const addOrUpdateRef = ref()
const addOrUpdateHandle = data => {
	addOrUpdateRef.value.init(data)
}

const searchBtn = () => {
	if (!state.queryForm.algoCode) {
		delete state.queryForm.algoCode
	}
	state.page = 1
	useCrud(state).getDataList()
}

const resets = () => {
	state.queryForm = {}

	state.page = 1
	state.limit = 10

	useCrud(state).getDataList()
}

const { selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>

<style lang="scss"></style>
